import React, { useState, useEffect, useMemo } from 'react'
import './index.less'
import { VolumeO, Cross } from '@react-vant/icons'
import { NoticeBar, ActionSheet, Cell, Stepper, Checkbox, Empty, ShareSheet, Toast, Dialog } from 'react-vant'
import { history } from 'umi'

export default function Question() {

  const [shopslist, setshops] = useState(JSON.parse(sessionStorage.getItem('shopsadd')) || [])
  const [visible, setVisible] = useState(false)
  const onCancel = () => setVisible(false)
  const [checked, setChecked] = React.useState(false)
  const [showdiv, setdiv] = useState(false)
  const [dellist, setdellist] = useState([])
  const options = [
    [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
      { name: '微博', icon: 'weibo' },
      { name: 'QQ', icon: 'qq' },
    ],
    [
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
      { name: '小程序码', icon: 'weapp-qrcode' },
    ],
  ]
  const [visible1, setVisible1] = useState(false)
  const [cur_index, setcur_index] = useState(3)


  function handlenum(val, id) {
    // console.log(val, _id);

    let newlist = shopslist.map(item => {
      if (item._id === id) {

        item.num = val
      }
      return item
    })
    setshops(newlist)
  }
  function handlechange(e, id) {
    let newlist = shopslist.map(item => {
      if (item._id === id) {

        item.flags = e
      }
      return item
    })

    setshops(newlist)
  }
  const allchange = useMemo(() => {
    return shopslist.every(item => item.flags)
  })
  const handleallchange = () => {
    let newlist = shopslist.map(item => {
      item.flags = !item.flags
      return item
    })
    setshops(newlist)
  }
  const totalprice = useMemo(() => {
    return shopslist.filter(item => item.flags).reduce((a, b) => {
      return a += b.price * b.num
    }, 0)
  })
  const handledelshopslist = (data) => {
    if (totalprice != 0) {
      if (data == 1) {
        setcur_index(2)
        Toast.success('成功分享')
        let newlist = shopslist.filter(item => !item.flags)
        setshops(newlist)
      } else if (data == 2) {
        setcur_index(3)
        let newlist = shopslist.filter(item => !item.flags)

        Dialog.confirm({

          message: '确定要删除所选商品吗？',
          onCancel: () => console.log('cancel'),
          onConfirm: () => setshops(newlist),
        })
      }
    }


  }
  function handlefenx() {
    setcur_index(1)
    setVisible1(true)
  }
  return (
    // console.log(totalprice),
    <div>

      <div style={{ margin: '5vw 0 3vw 3vw' }}>
        <p >购物车 </p>
      </div>
      <hr style={{ border: '0.5px solid #F2F2F2' }} />
      {shopslist == '' ?
        <div>
          <Empty
            className="custom-image"
            imageSize={100}
            image={<img src="https://img.yzcdn.cn/vant/custom-empty-image.png" />}
          // description="购物车空空如也哦去挑选几件喜欢的商品吧"
          />
          <div className='pbox'>
            <p style={{ color: '#999999', fontSize: '23px' }}>购物车空空如也哦</p>
            <p style={{ color: '#B5B5B5', fontSize: '21px', marginTop: '3vw' }}>去挑选几件喜欢的商品吧</p>
          </div>
          <div style={{ margin: '0 auto', width: '95vw', height: '100%', textAlign: 'center', background: '#55A034', borderRadius: '20px', marginTop: '20vw' }}>
            <p
              onClick={() => history.push('/app/home')}
              style={{ padding: '10px', color: 'white', fontSize: '14px' }}> 随便逛逛</p>
          </div>
        </div>
        :
        <div>


          {/*显示上面的 */}
          <NoticeBar
            onClick={() => setVisible(true)}
            leftIcon={<VolumeO />}
            text='单笔订单金额满88元可免邮费'
          />
          {/* 显示渲染数据 */}
          <div >
            {shopslist.map(item => {
              return <div key={item._id} className='shopsbox'>
                <div style={{ marginLeft: '2.5vw' }}>
                  <Checkbox checked={item.flags} onChange={(e) => handlechange(e, item._id)}>

                  </Checkbox>
                </div>
                <div className='twobox'>


                  <div>
                    <img style={{ width: '90px', height: '90px', borderRadius: '50%' }} src={item.imgs} alt="" />
                  </div>

                  <div style={{ marginLeft: '2vw' }}>
                    <p>{item.name}  {item.kgs}</p>
                    <p style={{ marginTop: '3vw', color: 'red' }}>￥{item.price}</p>
                  </div>
                </div>

                <div style={{ marginRight: '2.5vw' }}>
                  <Stepper
                    value={item.num}
                    onChange={val => handlenum(val, item._id)}
                    theme='round'
                    buttonSize='22'

                    min={1}
                  />
                </div>
              </div>
            })}
          </div>
          {/* 分享面板 */}
          <div>
            <ShareSheet
              visible={visible1}
              options={options}

              onCancel={() => setVisible1(false)}
              onSelect={(option, index) => {
                console.log('option', option)
                console.log('index', index)

              }}
            />
          </div>
          {/* 显示弹出框 */}
          <div>
            <ActionSheet visible={visible} onCancel={onCancel}>
              <div style={{ padding: '16px 16px 160px' }}>
                <div className='itemspan'>
                  <span>服务说明</span>
                  <span><Cross onClick={() => setVisible(false)} /></span>
                </div>

                <div>
                  <hr style={{ border: '1px solid #f5f5f5', margin: '3vw 0' }} />
                </div>
                <div className='pbiao'>
                  <p>• 退货</p>
                  <p>食物不支持7天无理由退货</p>
                  <p>• 满88元免邮费</p>
                  <p>单笔订单金额(不含运费)满88元可免邮费不满88元</p>
                  <p>单笔订单收取10元邮费。</p>
                </div>
              </div>
            </ActionSheet>
          </div>
          {/* 显示底部全选 */}
          <div className='shopsbottonbox'>
            <div style={{ display: 'inline-block', marginLeft: '2vw' }}>
              <span><Checkbox checked={allchange} onChange={handleallchange} >全选</Checkbox></span>
            </div>
            {showdiv == false ? <div className='showbox2'>
              <span>总价: <span style={{ color: 'red' }}>￥{totalprice.toFixed(2)}</span> </span>
              <span onClick={() => setdiv(true)} style={{ color: '#55A034' }}>编辑</span>
              <span style={{ background: '#55A034', display: 'flex', color: 'white', height: '100%', width: '33%', justifyContent: 'space-around', alignItems: 'center' }}>去结算</span>
            </div> :
              <div className='showbox3'>
                <span className={cur_index === 1 ? 'spana' : 'spanb'} onClick={() => handlefenx()}  >分享</span>
                <span className={cur_index === 2 ? 'spana' : 'spanb'} onClick={() => handledelshopslist(1)}  >移除收藏</span>
                <span className={cur_index === 3 ? 'spana' : 'spanb'} onClick={() => handledelshopslist(2)} >删除</span>
                <span onClick={() => setdiv(false)} style={{ marginRight: '4vw', color: '#55A034', border: '0' }}>完成</span>
              </div>
            }


          </div>


          {/* 加高的元素 */}

          <div style={{ height: '50px' }}>

          </div>
        </div>
      }
    </div>
  )
}
